<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法
        <RouterLink
          :to="`/news/detail/${news.id}/${news.title}/${news.content}`"
        >
          {{ news.title }}
        </RouterLink> -->

        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangxi',
            params: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="new-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { RouterView, RouterLink } from "vue-router";
const newsList = reactive([
  { id: "001", title: "如何上厕所", content: "太高级了，你学不会" },
  { id: "002", title: "如何摸到狮子高玩", content: "不知道" },
  {
    id: "003",
    title: "震惊，一男子...",
    content: "一男子竟然偷偷在寝室写作业,被殴打致死!(4.1)",
  },
  {
    id: "004",
    title: "震惊!",
    content: "明天竟然是昨天的后天！",
  },
]);
</script>
<style scoped>
.color {
  background-color: rgb(253, 126, 200);
}
</style>
